<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            width: 1000px;
            margin: 10px auto;
        }

        th,
        td {
            padding: 7px 14px;
            min-width: 100px;
            text-align: center;
            border: 1px solid #ccc
        }
        .job{
            background-color: darkseagreen;
            color:#fff
        }
        tbody tr:nth-child(even){
            background-color: #cdcdcd;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>性别</th>
                <th>签名</th>
                <th>积分</th>
                <th>评分</th>
                <th>职业</th>
                <th>财富</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</body>
<script>
    $(function () {
        $.ajax({
            type: 'get',
            url: 'js/index.json',
            success: function (res) {
                var { data } = res;
                // 数据拿到后再调用函数
                addTr(data)
            }
        })

        function addTr(param) {
            console.log(param);
            for (var i = 0; i < param.length; i++) {
                var tr = $(`<tr>
                <td>${param[i].username}</td>
                <td ${param[i].sex == '女'?'style="color:pink"':''}>${param[i].sex}</td>
                <td>${param[i].sign}</td>
                <td>${param[i].experience}</td>
                <td>${param[i].score}</td>
                <td class="job">${param[i].classify}</td>
                <td>${param[i].wealth}</td></tr>`);
                $('tbody').append(tr)
            }
        }
    })
</script>

</html>